<script setup lang="ts">
// 断言数据类型
import type { HotItem } from '@/types/home'

import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHomeHotAPI } from '@/services/home'

const hotList = ref<HotItem[]>([])
const getHomeHot = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}
onLoad(() => {
  getHomeHot()
})
defineExpose({
  getHomeHot,
})
</script>

<template>
  <!-- 推荐专区 -->
  <view class="panel hot">
    <navigator
      hover-class="none"
      :url="'/pages/hot/hot?type=' + item.type"
      class="item"
      v-for="(item, i) in hotList"
      :key="item.id"
      :class="{ 'item-left-border': i % 2 === 0, 'item-bottom-border': i < 2 }"
    >
      <view class="title">
        <text class="title-text">{{ item.title }}</text>
        <text class="title-desc">{{ item.alt }}</text>
      </view>
      <view class="cards">
        <image class="image" mode="aspectFit" :src="item.pictures[0]"></image>
        <image
          class="image"
          mode="aspectFit"
          :src="item.pictures[1]"
          style="margin-left: 12rpx"
        ></image>
      </view>
    </navigator>
  </view>
</template>

<style lang="scss">
/* 热门推荐 */
.hot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 508rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    color: #262626;
    position: relative;

    .title-desc {
      font-size: 24rpx;
      color: #7f7f7f;
      margin-left: 18rpx;
    }
  }

  .item-bottom-border {
    border-bottom: 1rpx solid #eee;
  }

  .item-left-border {
    border-right: 1rpx solid #eee;
  }

  .item {
    display: flex;
    flex-direction: column;
    height: 254rpx;

    //

    .title {
      justify-content: start;
    }

    &:nth-child(2n) {
      border-right: 0 none;
    }

    &:nth-child(-n + 2) {
      border-top: 0 none;
    }

    .image {
      width: 150rpx;
      height: 150rpx;
    }
  }

  .cards {
    flex: 1;
    padding: 15rpx 20rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
